<template>
  <view class="container">
    <view class="register-content">
      <view class="logo-section">
        <text class="app-title">用户注册</text>
        <text class="app-subtitle">创建您的睡眠健康账户</text>
      </view>

      <view class="form-section">
        <view class="input-group">
          <text class="input-label">用户名</text>
          <input 
            class="input-field" 
            type="text" 
            placeholder="请输入用户名"
            v-model="formData.username"
            maxlength="20"
          />
        </view>

        <view class="input-group">
          <text class="input-label">密码</text>
          <input 
            class="input-field" 
            type="password" 
            placeholder="请输入密码"
            v-model="formData.password"
            maxlength="20"
          />
        </view>

        <view class="input-group">
          <text class="input-label">确认密码</text>
          <input 
            class="input-field" 
            type="password" 
            placeholder="请再次输入密码"
            v-model="formData.confirmPassword"
            maxlength="20"
          />
        </view>

        <button class="register-btn" @click="handleRegister" :disabled="loading">
          {{ loading ? '注册中...' : '注册' }}
        </button>

        <view class="login-link">
          <text class="login-text">已有账号？</text>
          <text class="login-btn" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RegisterPage',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      loading: false
    };
  },
  methods: {
    async handleRegister() {
      if (!this.formData.username || !this.formData.password || !this.formData.confirmPassword) {
        this.showToast('请填写完整信息');
        return;
      }

      if (this.formData.password !== this.formData.confirmPassword) {
        this.showToast('两次输入的密码不一致');
        return;
      }

      if (this.formData.password.length < 6) {
        this.showToast('密码长度至少6位');
        return;
      }

      this.loading = true;
      try {
        // 这里应该调用注册API
        // const res = await registerApi.register(this.formData);
        
        // 模拟注册成功
        setTimeout(() => {
          this.showToast('注册成功', 'success');
          
          // 跳转到登录页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/index'
            });
          }, 1500);
        }, 1000);
        
      } catch (error) {
        console.error('注册失败:', error);
        this.showToast('注册失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      });
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.register-content {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.app-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.app-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.form-section {
  width: 100%;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.input-field {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: #667eea;
  background: #fff;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 40rpx;
}

.register-btn:disabled {
  opacity: 0.6;
}

.login-link {
  text-align: center;
}

.login-text {
  font-size: 28rpx;
  color: #666;
}

.login-btn {
  font-size: 28rpx;
  color: #667eea;
  margin-left: 16rpx;
}
</style> 